<template>
  <div class="pixar-player">
    <div :style="{'width':width+'px','height':height+'px','margin':'0 auto'}">
      <link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
        <!-- <div class="pixar-controls">
          <button type="text" @click="onPlay">Play</button>
          <button type="text" @click="onPause">Pause</button>
        </div> -->
        <video id="my-video" class="video-js" controls preload="auto" width="100%" height="100%" :poster="options.poster" data-setup="{}">
          <source v-for="source in [sources[0]]" :src="source.src" :type="source.type" :key="source.src">
          </source>
        </video>
    </div>

  </div>
</template>

<script>
  import videojs from 'video.js'
  export default {
    name: 'pixar-player',
    props: {
      sources: Array,
      width:{
        type:Number,
        default:600,
      },
      height:{
        type:Number,
        default:400,
      },
      options: {
        type: Object,
        default () {
          return {
            autoplay: false,
            volume: 0.9,
            poster: ''
          }
        }
      }
    },
    data() {
      return {
        $video: null,
      }
    },
    methods: {
      onPlay(clickEevent) {
        this.$video.play()
      },
      onPause(clickEvent) {
        this.$video.pause()
      }
    },
    mounted() {
      this.$video = videojs(this.$el.getElementsByTagName('video')[0])
      console.info(this.$video)
    },
    created() {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pixar-player{
    width:100%;
    height:100%;
  }
  .my-video-dimensions{
    width:100%;
    height:100%;
  }
</style>
